<template>
  <div class="shoppingList">
    <!-- content -->
    <el-row :span="24" class="viewContent">
      <!-- title -->
      <el-col :span="24" class="contentTitle">
        <span class="iconfont">◆◆</span>
        <span>{{ pageTitle }}</span>
        <span class="iconfont">◆◆</span>
      </el-col>
      <!-- goods information -->
      <el-col :span="24" class="contentMain" v-for="item in datas.productList">
        <!-- img -->
        <el-col :span="6" class="goodsImg"></el-col>
        <!-- desc -->
        <el-col :span="18" class="goodsInfo">
          <!-- information -->
          <div class="infoTop" @click="routerGo()">
            <span>{{ item.productName }}</span>
            ·
            {{ item.productInfo }}
          </div>
          <!-- price & purchase -->
          <div class="infoBottom">
            <div class="price">
              <span>RMB</span>
              {{ item.productPrice }}
            </div>
            <div class="addCart">车</div>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      pageTitle: '进货商城',
      projectBaseUrl: 'http://218.104.153.143:8089',
      routerLocation: '/shopping/details',
      datas: { // 产品数据
        success: '操作成功',
        productList: [
          {
            productID: '0100010010',
            createTime: 1512393772000,
            updateTime: 1512393772000,
            id: 7,
            productName: '恒之源',
            productPrice: '912.36',
            productInfo: '很好的产品',
            status: 1
          }
        ]
      }
    }
  },
  methods: {
    routerGo () { // 路由跳转
      this.$router.push(this.routerLocation)
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.shoppingList {
  .viewContent {
    background-color: #eee;
    min-height: 500px;
    .contentTitle {
      height: 60px;
      line-height: 60px;
      background-color: #eee;
      font-size: 18px;
      .iconfont {
        font-size: 22px;
        vertical-align: middle;
        padding: 0 5px;
      }
    }
    .contentMain {
      background-color: #fff;
      padding: 25px;
      display: flex;
      justify-content: flex-start;
      margin-bottom: 5px;
      .goodsImg {
        height: 100px;
        width: 100px;
        background-color: #eee;
      }
      .goodsInfo {
        padding-left: 20px;
        text-align: left;
        text-indent: 20px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .infoTop {
          padding-bottom: 20px;
        }
        .infoBottom {
          display: flex;
          justify-content: flex-start;
          line-height: 30px;
          padding-left: 20px;
          .price {
            color: red;
            font-size: 16px;
            text-indent: 0;
            span {
              font-size: 12px;
            }
          }
          .addCart {
            text-indent: center;
            color: #fff;
            text-indent: 0;
            padding: 2px 12px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            right: 40px;
          }
        }
      }
    }
  }
}
</style>
